import 'package:flutter/material.dart';

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('首页'),
        centerTitle: true, // 标题居中显示
      ),
      body: const HomeBodyWidget(),
    );
  }
}

class HomeBodyWidget extends StatefulWidget {
  const HomeBodyWidget({super.key});

  @override
  State<HomeBodyWidget> createState() => _HomeBodyWidgetState();
}

class _HomeBodyWidgetState extends State<HomeBodyWidget> {
  @override
  Widget build(BuildContext context) {
    // print(MediaQuery.of(context).size.width);
    // print(MediaQuery.of(context).size.height);
    // Wrap换行组件 spacing列间距 runSpacing行间距 direction 展示方向
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      padding: const EdgeInsets.all(10),
      child: Wrap(
          spacing: 10,
          runSpacing: 10,
          // direction: Axis.vertical, // 垂直方向 默认水平Axis.horizontal
          /**
           * 设置水平样式一定要设置宽度才生效
           * start 默认左对齐
           * end 右对齐
           * center 居中对齐
           * spaceBetween 两端对齐
           * spaceAround 平均分配
           * spaceEvenly 平均分配 两端空隙大
           * 写法：alignment: WrapAlignment.start
           */
          alignment: WrapAlignment.spaceBetween, // 水平两端对齐
          /***
           *垂直对齐，设置垂直对齐一定要设置高度
           * start 默认上对齐
           * end 底部对齐
           * center 居中对齐
           * spaceBetween 两端对齐
           * spaceAround 平均分配
           * spaceEvenly 平均分配 两端空隙大
           * 写法：runAlignment: WrapAlignment.start
           */
          runAlignment: WrapAlignment.start, // 垂直两端对齐
          children: [
            ElevatedButton(
                onPressed: () =>
                    {Navigator.pushNamed(context, '/stateLessWidget')},
                child: const Text('stateLessWidget')),
            ElevatedButton(
                onPressed: () => {Navigator.pushNamed(context, '/form')},
                child: const Text('form表单')),
            ElevatedButton(
                onPressed: () =>
                    {Navigator.pushNamed(context, '/statefulWidget')},
                child: const Text('statefulWidget')),
            ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, '/text'),
                child: const Text('text文本展示'))
          ]),
    );
  }
}
